<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
用户名:
<input name="username" id="username"/>
<span id="usernameMsg"></span>
<input type="button" value="点击" onclick="demo()"/>
</body>
<script>
    function demo() {
        //1.创建异步对象 XMLHttpRequest
        var xhr = new XMLHttpRequest();
        //2.调用open(method,url,async)方法
        // method:异步的请求方式 url:请求路径  async是否异步,默认为true(异步)
        var val = document.getElementById("username").value;
        xhr.open("get", "ajaxDemo?name=" + val, true);
        //3.发送请求  send()
        xhr.send();
        //4.处理服务器返回的数据 -->1.获取到服务器返回的数据?  什么时候处理呢？
        // readyState 4    status  200  responseText获取服务器返回数据
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                //5.获取服务器数据
                var d = xhr.responseText;
                //6.相关dom操作
                var obj = document.getElementById("usernameMsg");
                obj.innerHTML = d;
            }
        }
    }


</script>
</html>